<template>
  <div class="meadow-background">
    <!-- 草地 -->
    <div class="grass-layer">
      <div v-for="i in 60" :key="`grass-${i}`" 
           class="grass"
           :style="{ 
             left: `${i * 1.8}%`, 
             height: `${60 + Math.random() * 40}px`,
             animationDelay: `${Math.random() * 2}s`,
             filter: `hue-rotate(${Math.random() * 20}deg)`
           }">
        <div v-for="j in 5" :key="j" 
             class="blade"
             :style="{
               transform: `rotate(${-20 + j * 10}deg) scaleY(${0.8 + Math.random() * 0.4})`,
               opacity: `${0.6 + Math.random() * 0.4}`
             }">
        </div>
      </div>
    </div>
    
    <!-- 花朵 -->
    <div class="flowers-layer">
      <div v-for="i in 20" :key="`flower-${i}`" 
           class="flower"
           :style="{ 
             left: `${Math.random() * 100}%`, 
             bottom: `${20 + Math.random() * 40}px`,
             transform: `scale(${0.6 + Math.random() * 0.4})`,
             animationDelay: `${Math.random() * 2}s` 
           }">
        <div class="center"></div>
        <div v-for="p in 8" :key="p" class="petal"></div>
      </div>
    </div>
    
    <!-- 小动物层 -->
    <div class="animals-layer">
      <!-- 兔子 -->
      <div v-for="i in 2" :key="`rabbit-${i}`"
           class="rabbit"
           :style="{ 
             left: `${20 + i * 30}%`,
             bottom: '10px',
             animationDelay: `${Math.random() * 3}s`
           }">
        <div class="body"></div>
        <div class="head">
          <div class="ear left"></div>
          <div class="ear right"></div>
        </div>
        <div class="tail"></div>
      </div>
      
      <!-- 小鸟 -->
      <div v-for="i in 3" :key="`bird-${i}`"
           class="bird"
           :style="{ 
             left: `${Math.random() * 80}%`,
             bottom: `${30 + Math.random() * 40}px`,
             animationDelay: `${Math.random() * 2}s`
           }">
        <div class="wing left"></div>
        <div class="wing right"></div>
        <div class="head"></div>
      </div>
    </div>
    
    <!-- 蝴蝶 -->
    <div v-for="i in 3" :key="`butterfly-${i}`"
         class="butterfly"
         :style="{ 
           left: `${Math.random() * 100}%`,
           bottom: `${50 + Math.random() * 100}px`,
           animationDuration: `${15 + Math.random() * 10}s`,
           animationDelay: `${Math.random() * 5}s`
         }">
      <div class="wing left"></div>
      <div class="wing right"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "sass:color";

.meadow-background {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25vh;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, black 20%);
}

.grass-layer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
  transform-origin: bottom;
}

.grass {
  position: absolute;
  bottom: 0;
  width: 15px;
  animation: sway 3s ease-in-out infinite alternate;
  transform-origin: bottom center;
  
  .blade {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    height: 100%;
    background: linear-gradient(to top, 
      var(--theme-success), 
      color.adjust(#a5d6a7, $lightness: 10%)
    );
    border-radius: 100px;
    transform-origin: bottom center;
    box-shadow: -1px 0 1px rgba(0, 0, 0, 0.1);
  }
}

.flowers-layer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  height: 60px;
}

.flower {
  position: absolute;
  width: 16px;
  height: 16px;
  animation: flower-sway 4s ease-in-out infinite alternate;
  
  .center {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  }
  
  .petal {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(45deg, #fff, #f0f0f0);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform-origin: center;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    
    @for $i from 1 through 8 {
      &:nth-child(#{$i + 1}) {
        transform: translate(-50%, -50%) rotate($i * 45deg) translateY(-6px);
      }
    }
  }
}

.butterfly {
  position: absolute;
  width: 15px;
  height: 15px;
  animation: butterfly-float 20s linear infinite;
  
  .wing {
    position: absolute;
    width: 8px;
    height: 12px;
    background: linear-gradient(45deg, 
      rgba(255, 182, 193, 0.9),
      rgba(255, 182, 193, 0.5)
    );
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    animation: wing-flap 0.2s ease-in-out infinite alternate;
    box-shadow: 0 0 5px rgba(255, 182, 193, 0.3);
    
    &.left {
      left: 0;
      transform-origin: right center;
    }
    
    &.right {
      right: 0;
      transform-origin: left center;
    }
  }
}

.animals-layer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.rabbit {
  position: absolute;
  width: 30px;
  height: 30px;
  animation: rabbit-hop 2s ease-in-out infinite;
  
  .body {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 16px;
    background: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
  
  .head {
    position: absolute;
    bottom: 10px;
    left: 12px;
    width: 12px;
    height: 12px;
    background: #f0f0f0;
    border-radius: 50%;
    
    .ear {
      position: absolute;
      bottom: 8px;
      width: 4px;
      height: 12px;
      background: #f0f0f0;
      border-radius: 2px;
      transform-origin: bottom center;
      animation: ear-wiggle 1s ease-in-out infinite alternate;
      
      &.left {
        left: 2px;
        transform: rotate(-10deg);
      }
      
      &.right {
        right: 2px;
        transform: rotate(10deg);
      }
    }
  }
  
  .tail {
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #f0f0f0;
    border-radius: 50%;
    animation: tail-wiggle 0.5s ease-in-out infinite alternate;
  }
}

.bird {
  position: absolute;
  width: 20px;
  height: 15px;
  animation: bird-hop 1s ease-in-out infinite alternate;
  
  .head {
    position: absolute;
    top: 0;
    left: 12px;
    width: 8px;
    height: 8px;
    background: #87CEEB;
    border-radius: 50%;
    
    &::after {
      content: '';
      position: absolute;
      top: 2px;
      right: -2px;
      width: 4px;
      height: 2px;
      background: #FFA500;
      border-radius: 2px;
      transform: rotate(-45deg);
    }
  }
  
  .wing {
    position: absolute;
    width: 10px;
    height: 8px;
    background: #87CEEB;
    border-radius: 5px;
    animation: wing-flap 0.5s ease-in-out infinite alternate;
    
    &.left {
      left: 0;
      transform-origin: right center;
    }
    
    &.right {
      right: 0;
      transform-origin: left center;
    }
  }
}

@keyframes sway {
  0% { 
    transform: rotate(-5deg) scale(1); 
    filter: brightness(1);
  }
  100% { 
    transform: rotate(5deg) scale(0.98); 
    filter: brightness(1.1);
  }
}

@keyframes flower-sway {
  0% { 
    transform: rotate(-8deg) translateY(0); 
    filter: brightness(1);
  }
  100% { 
    transform: rotate(8deg) translateY(-2px); 
    filter: brightness(1.1);
  }
}

@keyframes butterfly-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20vw, -30px) rotate(15deg) scale(1.1);
  }
  50% {
    transform: translate(40vw, 10px) rotate(-10deg) scale(0.9);
  }
  75% {
    transform: translate(60vw, -20px) rotate(20deg) scale(1.1);
  }
  100% {
    transform: translate(100vw, 0) rotate(0deg);
  }
}

@keyframes wing-flap {
  0% { 
    transform: rotate(-30deg) scaleX(0.9); 
    opacity: 0.8;
  }
  100% { 
    transform: rotate(30deg) scaleX(1.1); 
    opacity: 1;
  }
}

@keyframes rabbit-hop {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-10px) scaleY(0.9);
  }
}

@keyframes ear-wiggle {
  0% { transform: rotate(-10deg); }
  100% { transform: rotate(-5deg); }
}

@keyframes tail-wiggle {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

@keyframes bird-hop {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-5px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(-5deg);
  }
}
</style> 